<template>
	<view class="container flex-column">
		<text class="text-title1">会员卡登录</text>

		<!-- 会员卡号 -->
		<view class="view-input flex-row center-row">
			<image class="input-lefticon" src="https://mcdn.chatgk.com/xcx/static/images/login/login_phone.png"
				mode="aspectFit"></image>
			<view class="view-line"></view>
			<input v-model="cardID" @input="onInputChange" class="input" type="number" placeholder="请输入您的会员卡">
		</view>

		<!-- 密码 -->
		<view class="view-input flex-row center-row" style="margin-top: 32rpx;">
			<image class="input-lefticon" src="https://mcdn.chatgk.com/xcx/static/images/login/password.png"
				mode="aspectFit"></image>
			<view class="view-line"></view>
			<input class="input" v-model="password" password="true" @input="onInputChange" placeholder="请输入会员卡密码" />
		</view>
		<!-- 用户协议 -->
		<view class="useragreement">
			<image style="width: 32rpx; height: 32rpx; margin-right: 12rpx;"
				:src="'https://mcdn.chatgk.com/xcx/static/images/searchcollege/contrast_sel_' + (isSelectAgreement ? 's.png':'n.png')"
				mode="aspectFit" @tap="onClickCheckAgreement"></image>
			<text>登录或注册代表您已同意</text>
			<!-- <uni-link :href="userAgreement" text="服务协议" color="#FF3B0A" showUnderLine="false"
				fontSize="24rpx"></uni-link>
			<text>和</text>
			<uni-link :href="privacyPolicy" text="隐私政策" color="#FF3B0A" showUnderLine="fasle"
				fontSize="24rpx"></uni-link> -->
			<text style="color: #FF3B0A" @tap="userAgreement">用户协议</text>
			<text>和</text>
			<text style="color: #FF3B0A" @tap="privacyPolicy">隐私政策</text>
		</view>
		<!-- 登录 -->
		<button class="button-login" :class="isAvailable ? 'available':''" @tap="onClickLogin">登录</button>
		<!-- <loading v-show="loadshow"></loading> -->
	</view>
	<view class="loginshowbox" v-if="ishowxiezi&&!isSelectAgreement" @tap.stop="()=>{ishowxiezi=false}">
		<view class="loginshowbox-main" @tap.stop="()=>{}">
			<view class="loginshowbox-main-h">
				用户协议和隐私政策
			</view>
			<view class="loginshowbox-main-c">
				进入下一步，请先阅读并同意
				<!-- <uni-link :href="userAgreement" text="用户协议" color="#FF3B0A" showUnderLine="false"
					fontSize="24rpx"></uni-link>
				<text>和</text>
				<uni-link :href="privacyPolicy" text="隐私政策" color="#FF3B0A" showUnderLine="fasle"
					fontSize="24rpx"></uni-link> -->
				<text style="color: #FF3B0A" @tap="userAgreement">用户协议</text>
				<text>和</text>
				<text style="color: #FF3B0A" @tap="privacyPolicy">隐私政策</text>
			</view>
			<view class="loginshowbox-main-f">
				<view class="loginshowbox-no" @tap.stop="()=>{ishowxiezi=false}">
					不同意
				</view>
				<view class="loginshowbox-no loginshowbox-yes" @tap.stop="onchangexieyi">
					同意并登录
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadshow: false,
				isSelectAgreement: false, // 是否勾选协议
				isAvailable: false, // 登录按钮是否可用
				cardID: "",
				password: "",
				ishowxiezi: false,
			}
		},
		methods: {
			userAgreement() {
				uni.navigateTo({
					url: '/subpackages/subpackage1/pages/userAgreement/userAgreement'
				})
			},
			privacyPolicy() {
				uni.navigateTo({
					url: '/subpackages/subpackage1/pages/privacyPolicy/privacyPolicy'
				})
			},
			onchangexieyi() {
				this.ishowxiezi = false
				this.isSelectAgreement = true
				this.checkIsAvailable()
				this.onClickLogin()
			},
			// 输入框值改变
			onInputChange() {
				this.checkIsAvailable()
			},
			// 点击勾选协议
			onClickCheckAgreement() {
				this.isSelectAgreement = !this.isSelectAgreement
				this.checkIsAvailable()
			},
			// 点击登录
			onClickLogin() {
				if (!this.isAvailable) {
					return
				}
				if (!this.isSelectAgreement) {
					this.ishowxiezi = true
					return
				}
				// uni.showLoading({
				// 	title: "登录中...",
				// 	mask: true
				// })
				this.loadshow = true
				this.$request.memberLogin({
					"member_id": this.cardID,
					"password": this.password
				}).then(res => {
					this.loadshow = false
					uni.hideLoading()
					uni.showToast({
						title: "登录成功",
						icon: "success"
					})
					uni.setStorageSync("isFirstLogin", true)

					const userInfo = getApp().globalData.userInfo

					if (res.data.toBindPhone == "1") {
						uni.navigateTo({
							url: './binding-phone?cardID=' + this.cardID + '&password=' + this.password
						})
					} else if (!userInfo.pid) {
						uni.navigateTo({
							url: './perfect-info'
						})
					} else {
						setTimeout(() => {
							uni.navigateBack({
								delta: 2
							})
						}, 1000)
					}
				}).catch(err => {
					uni.hideLoading()
				})
			},
			// 检查登录是否可用
			checkIsAvailable() {
				this.isAvailable = this.cardID.length > 0 && this.password.length > 0
			}
		}
	}
</script>

<style>
	button::after {
		border: none;
	}

	.container {
		padding: 0 76rpx 0 76rpx;
	}

	.center-row {
		display: flex;
		flex-direction: row;
		/* justify-content: center; */
		align-items: center;
	}

	.text-title1 {
		color: #464646;
		font-size: 40rpx;
		font-weight: bold;
		margin-top: 68rpx;
		margin-bottom: 160rpx;
	}

	.text-title2 {
		color: #464646;
		font-size: 28rpx;
		font-weight: bold;
		margin: 22rpx 0 160rpx 0;
	}

	.view-input {

		height: 80rpx;
		border: 2rpx solid #D8D8D8;
		margin-top: 160rpx;
		border-radius: 20rpx;
	}

	.input-lefticon {
		width: 44rpx;
		height: 40rpx;
		margin: 0 30rpx 0 30rpx;
	}

	.view-line {
		width: 2rpx;
		height: 44rpx;
		background-color: #D8D8D8;
	}

	.input {
		width: 260rpx;
		color: #464646;
		caret-color: #464646;
		font-size: 28rpx;
		margin: 0 20rpx 0 38rpx;
	}

	.text-read {
		color: #333;
		font-size: 24rpx;
		margin-top: 80rpx;
	}

	.button-login {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		color: #fff;
		font-size: 28rpx;
		font-weight: bold;
		background: #FF3B0A;
		border-radius: 20rpx;
		margin-top: 40rpx;
	}

	.button-login.available {
		background-color: #FF3B0A;
	}

	.loginshowbox {
		position: fixed;
		top: 0;
		z-index: 10;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.6);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.loginshowbox-main {
		padding: 0 38rpx;
		width: 686rpx;
		height: 380rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		box-sizing: border-box;
	}

	.loginshowbox-main-h {
		height: 120rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.loginshowbox-main-c {
		width: 100%;
		font-size: 32rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #999999;
		text-align: center;

	}

	.loginshowbox-main-f {
		margin-top: 50rpx;
		width: 100%;
		display: flex;
		justify-content: space-evenly;
	}

	.loginshowbox-no {
		width: 222rpx;
		height: 64rpx;
		border-radius: 32rpx;
		border: 2rpx solid #979797;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #999999;
	}

	.loginshowbox-yes {
		border: none;

		color: #FFFFFF;
		background: #FF3B0A;
	}
</style>
<style scoped lang="scss">
	.useragreement {
		display: flex;
		font-size: 24rpx;
		align-items: center;
		justify-content: center;
		padding-top: 50rpx;
	}
</style>